<template>
  <el-container class="admin">
    <el-aside :style="{ width: isCollapse ? '64px' : '200px' }">
      <img src="../../assets/images/logo.png" alt="" />
      <span class="ltitle" v-if="!isCollapse">管理后台</span>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <el-menu-item :index="$route.path" @click="isCollapse = !isCollapse">
          <el-icon><Expand v-if="isCollapse" /><Fold v-else /></el-icon>
          <template #title>
            <span v-if="isCollapse"> 展开</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/admin/dash">
          <el-icon><Setting /></el-icon>
          <template #title>首页</template>
        </el-menu-item>
        <el-menu-item index="/admin/orderlist">
          <el-icon><IconMenu /></el-icon>
          <template #title>订单列表</template>
        </el-menu-item>
        <el-menu-item index="/admin/listorder">
          <el-icon><Location /></el-icon>
          <template #title>列表订单</template>
        </el-menu-item>
        <el-sub-menu index="1-4">
          <template #title>
            <el-icon><location /></el-icon>
            <span>子菜单</span>
          </template>
          <el-menu-item index="1-4-1">item 1</el-menu-item>
          <el-menu-item index="1-4-2">item 2</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <!-- el-menu-item 菜单
           el-menu-item菜单项
           el-icon 控制图标颜色 大小
           Expand  Fold 图标svg
           template 插槽的命名
       -->
    </el-aside>

    <el-container class="container">
      <el-header class="header">Header2</el-header>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script lang="ts" setup>
import {
  Menu as IconMenu,
  Setting,
  Expand,
  Fold,
  Location,
} from "@element-plus/icons-vue";

// onMounted 挂载完毕
// onBeforeUnmount 卸载前
import { ref, onMounted, onBeforeUnmount } from "vue";
// isCollapse控制菜单是否折叠
const isCollapse = ref(false);
// 处理菜单打开
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 处理菜单关闭
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

// 目标：根据屏幕的宽度可以自动的实现折叠
// 01 添加事件
onMounted(() => {
  window.addEventListener("resize", changeCollapse);
});
// 02 执行折叠的方法
function changeCollapse(): void {
  // 获取窗口的宽
  var w = window.innerWidth;
  if (w > 1160) {
    isCollapse.value = false;
  } else {
    isCollapse.value = true;
  }
}

// 03 移除事件
onBeforeUnmount(() => {
  window.removeEventListener("resize", changeCollapse);
});
</script>
<style scoped>
.ltitle {
  font-size: 18px;
  color: dodgerblue;
  font-weight: 700;
}
.admin {
  height: 100vh;
}
.container {
  background-color: aliceblue;
  padding-left: 16px;
}
.header {
  background-color: #fff;
  margin-bottom: 16px;
}
.main {
  background-color: #fff;
}
</style>
